<template>
    <view class="order-details">
      <view class="product-info">
        <view class="section-title">商品信息</view>
        <view class="product-list">
          <view class="product-item" v-for="(product, index) in orderDetails.productList" :key="index">
            <view class="product-main">
              <image class="product-image" :src="product.image" mode="aspectFill" />
              <view class="product-content">
                <view>
                    <view class="product-name">{{ product.name }}</view>
                    <view class="product-name">款号：{{product.skuList[0].productSkuCode}}</view>
                    <view class="product-price">¥{{ product.price.toFixed(2) }}</view>
                </view>
                <view class="product-total">共{{ product.quantity }}件</view>
              </view>
            </view>
            <view class="product-variants">
              <view class="variant-item" v-for="(variant, vIndex) in product.skuList" :key="vIndex">
                <text class="variant-label">{{ variant.spec }}</text>
                <text class="variant-quantity">×{{ variant.quantity }}</text>
              </view>
            </view>
          </view>
        </view>
        <view class="total-section">
          <view>共{{orderDetails.totalQuantity}}件，合计：</view>
          <view class="total-amount">¥{{ orderDetails.price}}</view>
        </view>
      </view>
  
      <view class="order-info">
        <view class="info-item1">
          <view class="label">客户信息</view>
          <view class="value">{{ orderDetails.userName }} {{ orderDetails.mobile }}</view>
        </view>
      </view>
      <view class="order-info">
        <view class="info-item">
          <text class="label">下单时间</text>
          <text class="value">{{ orderDetails.createTime }}</text>
        </view>
        <view class="info-item">
          <text class="label">订单编号</text>
          <text class="value">{{ orderDetails.userPayRecordNo }}</text>
        </view>
        <view class="info-item">
          <text class="label">付款方式</text>
          <text class="value">{{ orderDetails.payTypeName }}</text>
        </view>
      </view>
  
      <view class="delete-section">
        <button class="delete-btn" @click="handleDelete">删除订单</button>
      </view>
    </view>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  import { shopApi } from "@/api";
  let userPayRecordId =ref()
  const orderDetails = ref({
    products: [
    ],
    totalAmount: 4510.00,
    customerAccount: '19877441122',
    orderTime: '2024-05-18 15:22',
    orderNumber: '51125315252222',
    paymentMethod: '余额支付'
  })
  
  const handleDelete = () => {
    uni.showModal({
        title: '提示',
        content: '确定要删除该订单吗？',
        success: (res) => {
            if (res.confirm) {
                shopApi.SCANPAYDELETESALES({id:userPayRecordId.value}).then((res) => {
                    if (res.code == 200) {
                      uni.showToast({
                        title: '订单已删除',
                        icon: 'success'
                      })
                      setTimeout(() => {
                        uni.navigateBack()
                      },2000)
                    }else{
                        uni.showToast({
                            title: res.errMsg,
                            icon: "success",
                        });
                    }
                });
            }
        }
    })
  }
  const getDataDetail = (Id) => {
    shopApi.SCANPAYGETSALESDETAIL({ id: Id }).then((res) => {
        if (res.code == 200) {
            console.log(res,'res')
            orderDetails.value = res.result
        } else{
            uni.showToast({
                title: res.errMsg,
                icon: "success",
            });
        }

    })
}
  onLoad((option) => {
    if (option.id) {
      userPayRecordId.value = option.id
        getDataDetail(option.id)
    }
});
  </script>
  <style lang="scss">
  page {
      background-color: #f3f3f3;
  }
  </style>
  <style lang="scss" scoped>
  .order-details {
    padding: 24rpx 0px;
    .section-title {
      font-size: 28rpx;
      padding: 20rpx 0px;
    }
  
    .product-info {
        background-color: #fff;
        padding: 24rpx;
        margin: 24rpx;
        box-sizing: border-box;
        border-radius:20rpx;
      .product-list {
        
        .product-item {
          padding: 20rpx 0px;
          border-bottom: 2rpx solid #f5f5f5;
  
          .product-main {
            display: flex;
            margin-bottom: 20rpx;
  
            .product-image {
              width: 120rpx;
              height: 120rpx;
              background-color: #f5f5f5;
              margin-right: 20rpx;
            }
  
            .product-content {
              flex: 1;
                display: flex;
                align-items: center;
                justify-content: space-between;
              .product-name {
                font-size: 28rpx;
                color: #333;
                margin-bottom: 10rpx;
              }
  
              .product-price {
                font-size: 28rpx;
                color: #333;
                margin-bottom: 10rpx;
              }
  
              .product-total {
                font-size: 24rpx;
                color: #999;
              }
            }
          }
  
          .product-variants {
            .variant-item {
              display: flex;
              justify-content: space-between;
              font-size: 24rpx;
              color: #666;
              margin-bottom: 24rpx;
  
              &:last-child {
                margin-bottom: 0;
              }
  
              .variant-quantity {
                color: #999;
              }
            }
          }
        }
      }
  
      .total-section {
        padding: 20rpx 0px;
        text-align: right;
        font-size: 28rpx;
        color: #666;
        display: flex;
        justify-content: flex-end;
        .total-amount {
            color:  rgba(193, 122, 50, 1);

          font-weight: bold;
        }
      }
    }
  
    .order-info {
        background-color: #fff;
        padding: 24rpx;
      margin: 24rpx;
      box-sizing: border-box;
      border-radius:20rpx;
  
      .info-item {
        display: flex;
        justify-content: space-between;
        padding: 20rpx 0;
        font-size: 28rpx;
  
        &:last-child {
          border-bottom: none;
        }
  
        .label {
          color: #666;
        }
  
        .value {
          color: #333;
        }
      }
      .info-item1{
        font-size: 28rpx;
  
        &:last-child {
          border-bottom: none;
        }
  
        .label {
          color: #666;
          margin-bottom: 24rpx;
        }
  
        .value {
          color: #333;
        }
      }
    }
  
    .delete-section {
      position: fixed;
      bottom: 0;
      left: 0;
      padding: 20rpx 50rpx 20rpx;
      box-sizing: border-box;
      background-color: #fff;
      box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
      width: 100%;
      display: flex;
      justify-content: flex-end;
      .delete-btn {
        width: 300rpx;
        line-height: 60rpx;
        background: none;
        border: 2rpx solid #999;
        color: #666;
        border-radius: 40rpx;
        font-size: 28rpx;
  
        &:active {
          opacity: 0.8;
        }
      }
    }
  }
  </style>